﻿TreeViewInsList = [];

CmnTreeView = function () {
    //定义json接受对象
    this.data = null;

    //主键列
    this.pkColumnName;

    //数据库父级关联列
    this.parentColumnName;

    //要在treeView上显示的列
    this.displayColumnName;

    //显示列的id
    this.valueColumnName;

    //职位的级别  对应数据库
    this.deepColumnName;

    //treeView所画的div的id
    this.divId;

    //treeView的默认宽度
    this.treeWidth = 200;

    //treeView的默认高度
    this.treeHeight = 460;

    //选中节点的callback回调
    this.rowSelectedCallback = null;

    //定义treeViewId
    this.treeViewId = "";

    //定义选中节点的信息
    this.selectedRowData = null;
};

CmnTreeView.prototype = {

    init: function (divId, json) {
        //给对象赋值
        this.divId = divId;

        this.data = json;

        this.treeViewId = "TreeView_" + divId;
    },
    //创建treeView
    create: function () {
        //调用实现方法，返回字符串
        var strHTML = this.getCreateTreeView(0, this.data, 0);
        //给treeView加个div 是其高度超出父div时出现滚动条
        strHTML = "<div id='" + this.treeViewId + "' style='overflow:auto;padding:10px;'>" + strHTML + "</div>";
        $j("#" + this.divId).empty();
        $j("#" + this.divId).append(strHTML);

        //把treeView加入到TreeViewInsList中
        TreeViewInsList[this.treeViewId] = this;

        //清空选中节点的信息
        this.selectedRowData = null;

        //设置焦点事件以及点击事件
        this.setRowEventOrColor();
    },
    //treeView的实现方法
    getCreateTreeView: function (parent_id, json, j) {
        var strHtml = "";
        //收缩图片
        var addImg = "<img src='../../Content/images/bgdown.png'>";
        //循环传过来的json 一级级画出tree
        for (var i = j; i < json.length; i++) {
            if (json[i][this.parentColumnName] == parent_id) {
                strHtml += "<div class='cmnTreeView_parentId_" + json[i][this.parentColumnName] + "' style=\"margin-left:" + 6 * json[i][this.deepColumnName] + "px\">";
                strHtml += "<div id=\"" + this.treeViewId + "_cmnTreeView_" + this.valueColumnName + "_" + json[i][this.valueColumnName] + "\"  style=\"height:25px;\" >";
                //判断是否是左右一个deep（最后一层），如果是最后一层则不加收缩图片
                if (json[i].has_child != 0) {
                    strHtml += "<span style='cursor:pointer;' id=\"" + this.treeViewId + "_cmnTreeView_span_img_" + json[i][this.valueColumnName] + "\" onclick=\"cmnTreeView_NodeClick('" + this.treeViewId + "', '" + json[i][this.valueColumnName] + "')\">" + addImg + "</span>";
                }
                //给span添加属性，以便于当点击节点是取得节点的信息
                strHtml += "<span rowNo=\"" + i + "\" id=\"" + this.treeViewId + "_cmnTreeView_span_display_value_" + json[i][this.valueColumnName] + "\" style='cursor:pointer; margin-left:5px;' onclick=\"cmnTreeView_rowClick('" + this.treeViewId + "', '" + json[i][this.valueColumnName] + "')\">";
                this.rowIndex += 1;
                strHtml += json[i][this.displayColumnName] + "</span></div>";
                //递归拼接父列的所有子列
                strHtml += this.getCreateTreeView(json[i][this.pkColumnName], json, i + 1);
                strHtml += "</div>";
            }
        }

        return strHtml;
    },
    //设置焦点事件以及点击事件
    setRowEventOrColor: function () {
        //点击节点时触发事件
        this.setRowClickEvent();

        //得到或失去焦点时触发事件
        this.setRowMouseMoveEvent();
    },
    //得到或失去焦点时触发事件
    setRowMouseMoveEvent: function () {
        //获取id类似于this.treeViewId + "_cmnTreeView_span_display_value_的值
        var spanMouse = "[id*=" + this.treeViewId + "_cmnTreeView_span_display_value_]";

        $j(spanMouse).unbind("mouseover");
        $j(spanMouse).unbind("mouseout");

        $j(spanMouse).mouseover(function () {
            $j(this).addClass("treeViewSelecting");
        });

        $j(spanMouse).mouseout(function () {
            $j(this).removeClass("treeViewSelecting");
        });
    },
    setRowClickEvent: function () {
        var treeViewIns = this;

        var spanMouse = "[id*=" + this.treeViewId + "_cmnTreeView_span_display_value_]";

        $j(spanMouse).unbind("click");

        $j(spanMouse).click(function () {
            $j(spanMouse).removeClass("treeViewSelectingExt");
            $j(this).addClass("treeViewSelectingExt");
            treeViewIns.selectedRowData = treeViewIns.data[$j(this).attr("rowNo")];
        });
    },

    setSelectingRow: function (pkId) {
        var spanMouse = "[id*=" + this.treeViewId + "_cmnTreeView_span_display_value_]";
        $j(spanMouse).removeClass("treeViewSelectingExt");

        var targetSpan = "#" + this.treeViewId + "_cmnTreeView_span_display_value_" + pkId;
        $j(targetSpan).addClass("treeViewSelectingExt");

        this.selectedRowData = this.data[$j(targetSpan).attr("rowNo")];
    }

};
//点击收缩图片时 进行图片转换和隐藏子内容
function cmnTreeView_NodeClick(treeViewId, id) {
    if ($j(".cmnTreeView_parentId_" + id).css("display") == "none") {

        //收缩动画
        $j(".cmnTreeView_parentId_" + id).slideDown(300);

        //改变图片
        $j("#" + treeViewId + "_cmnTreeView_span_img_" + id).find("img").attr("src", "../../Content/images/bgdown.png");
    }
    else {
        //伸展图画
        $j(".cmnTreeView_parentId_" + id).slideUp(300);

        //改变图片
        $j("#" + treeViewId + "_cmnTreeView_span_img_" + id).find("img").attr("src", "../../Content/images/bgup.png");
    }
}

function cmnTreeView_rowClick(treeViewId, pkId) {
    var treeViewIns = TreeViewInsList[treeViewId]

    if (typeof treeViewIns.rowSelectedCallback == "function") {
        treeViewIns.rowSelectedCallback(pkId);
    }
}